<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>拼游套餐配置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css" media="all">
</head>
<style>
    .addclassify {
        display: inline-block;
        width: 40px;
        height: 40px;
        border: 1px solid #666;
        line-height: 40px;
        border-radius: 40px;
        text-align: center;
        cursor: pointer;
    }
    .btns span {
        margin: 5px 10px;
    }
</style>
<body>
<div style="margin-top: 20px;">
</div>
<form class="layui-form" id="admin">
    <input type="hidden" id="classifyid" value="{$id}">
    <blockquote class="layui-elem-quote layui-text">
        当前货币单位为【 <span style="color:red">{$line.currency}</span> 】，如需修改请前往【<a href="/admin/grouptoursline/edit?id={$id}">编辑</a>】修改 <span style="font-weight: bold">出发地</span>
    </blockquote>
    <!--不存在套餐则显示下方提示-->
    {empty name='packages'}
    <blockquote class="layui-elem-quote layui-text">
        检测到当前未配置套餐 是否【<a class="createSpecs" href="" data-id="{$id}">创建淡旺季套餐</a>】
    </blockquote>
    {/empty}
    {notempty name='packages'}
    {if count($packages)<2}
    <blockquote class="layui-elem-quote layui-text">
        检测到当前未配置旺季套餐 是否【<a class="createBusySpecs" href="" data-id="{$id}">创建旺季套餐</a>】
    </blockquote>
    {/if}
    {/notempty}
    <div id="classifybox">
        {volist name="packages" id="vo"}
        <div class="layui-form-item classifychild">
            <label class="layui-form-label">套餐规格</label>
            <div class="layui-input-inline person" style="width: 500px">
                <input type="hidden" name="id" value="{$vo.id}">
                <div class="layui-input-inline" style="width: 400px;padding-bottom: 15px">
                    <input name="name" value="{$vo.name}"  placeholder="规格名称" autocomplete="off" class="layui-input" type="text" lay-key="1">
                </div>
            </div>
            <!--<span class="layui-btn  layui-btn-sm addperson" style="margin-top: 4px">新增</span>-->
            <span class="layui-btn layui-btn-danger layui-btn-sm  delclassify" data-id='{$vo.id}' style="margin-top: 4px">删除<i class="layui-icon"></i></span>

            <div class="layui-form-item childs">
                <label class="layui-form-label">&nbsp;</label>
                <div class="layui-input-inline person" style="width: 650px">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>{$table_name[0]}</th>
                            <th>{$table_name[1]}</th>
                            <th>{$table_name[2]}</th>
                            <th>{$table_name[3]}</th>
                            <th>{$table_name[4]}</th>
                            <!--<th>操作</th>-->
                        </tr>
                        </thead>
                        <tbody class="personchild">

                        {volist name="vo['child']" id="value"}
                        <tr>
                            <td>
                                <input type="hidden" name="id" value="{$value.id}">
                                <input name="name" value="{$value.name}"  placeholder="{$table_name[0]}" autocomplete="off" class="layui-input layui-col-xs5" type="text" lay-key="2" {if $vo.package_type>1}readonly{/if}>
                            </td>
                            <td>
                                <input name="price" value="{$value.price}" data-num="{$value.num}" old-value="{$value.price}"  placeholder="{$table_name[1]}" autocomplete="off" class="layui-input layui-col-xs5 {if $vo.package_type>1}busyPrice{/if}" type="number" lay-key="2" {if $vo.package_type>1}readonly{/if}>
                            </td>
                            <td>
                                <input name="num" value="{$value.num}"  placeholder="{$table_name[2]}" autocomplete="off" class="layui-input layui-col-xs5" type="number" lay-key="2" {if $vo.package_type>1}readonly{/if}>
                            </td>
                            <td>
                                <input name="minorder_num" value="{$value.minorder_num}"  placeholder="{$table_name[3]}" autocomplete="off" class="layui-input layui-col-xs5" type="number" lay-key="2" {if $vo.package_type>1}readonly{/if}>
                            </td>
                            <td>
                                <input name="inc_order_num" value="{$value.inc_order_num}"  placeholder="{$table_name[4]}" autocomplete="off" class="layui-input layui-col-xs5" type="number" lay-key="2" {if $vo.package_type>1}readonly{/if}>
                            </td>
                            <!--<td>-->
                                <!--<span class="layui-btn layui-btn-danger layui-btn-sm delperson" data-id="{$value.id}" style="margin-top: 4px"><i class="layui-icon"></i></span>-->
                            <!--</td>-->
                        </tr>
                        {/volist}

                        </tbody>
                    </table>

                </div>
            </div>

        </div>
        {/volist}

        <!--<div class="layui-form-item " style="text-align: center">-->
            <!--<span class="addclassify" id="addclassify">-->
                <!--<i class="layui-icon" style="font-size: 30px">&#xe654;</i>-->
            <!--</span>-->
        <!--</div>-->
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="admin">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    var message;
    layui.config({
        base: '__JS__/',
        version: '1.0.1'
    }).use(['app', 'message'], function() {
        var app = layui.app,
            $ = layui.jquery,
            layer = layui.layer;
        //将message设置为全局以便子页面调用
        message = layui.message;
        //主入口
        app.set({
            type: 'iframe'
        }).init();
    });
</script>
<script>
    layui.use(['layer', 'laydate', 'form'], function() {

        var layer = layui.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            form = layui.form;

        //提交表单
        form.on('submit(admin)', function(data) {
            var id = $("#classifyid").val(); //商品ID
            var post_data = [];
            var classifychild = $(".classifychild");
            for(var i = 0; i < classifychild.length; i++) {
                var package = {};
                var spec_data = [];
                var personchild = $(classifychild[i]).find(".personchild tr");
                for(var k = 0; k < personchild.length; k++) {
                    var spec = {};
                    var person_id = $(personchild[k]).find("input[name=id]").val();
                    spec.id = person_id || 0;
                    spec.name = $(personchild[k]).find("input[name=name]").val();
                    spec.price = $(personchild[k]).find("input[name=price]").val();
                    spec.num = $(personchild[k]).find("input[name=num]").val();
                    spec.minorder_num = $(personchild[k]).find("input[name=minorder_num]").val();
                    spec.inc_order_num = $(personchild[k]).find("input[name=inc_order_num]").val();
                    spec_data.push(spec);
                }
                package.name = $(classifychild[i]).find("input[name=name]").val();
                var specs_id = $(classifychild[i]).find("input[name=id]").val();
                package.id = specs_id || 0;
                package.child = spec_data;
                post_data.push(package);
            }
            if(post_data.length < 1){
                layer.msg('请先添加套餐配置！');return false;
            }
            var sub_loading = layer.load(2);
            $.ajax({
                url: "{:url('admin/grouptoursline/specs')}",
                data: {
                    id: id,
                    data: post_data
                },
                type: 'post',
                async: false,
                success: function(res) {
                    layer.close(sub_loading);
                    layer.msg(res.msg);
                    if(res.code == 1) {
                        setTimeout(function() {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        }, 1500)
                    }
                }
            })
            return false;
        })

        //一键生成淡旺季套餐
        $(".createSpecs").click(function(){
            var loading = layer.load(2);
            var id = $(this).attr('data-id');
            $.post('/admin/grouptoursline/createSpecsById',{id:id},function(res){
                layer.close(loading);
                layer.msg(res.msg);
                if(res.code>0){
                    setTimeout(function(){
                        window.location.reload();
                    },1000)
                }
            },'json')
            return false;
        })

        //一键生成旺季套餐
        $(".createBusySpecs").click(function(){
            var loading = layer.load(2);
            var id = $(this).attr('data-id');
            $.post('/admin/grouptoursline/createBusySpecsById',{id:id},function(res){
                layer.close(loading);
                layer.msg(res.msg);
                if(res.code>0){
                    setTimeout(function(){
                        window.location.reload();
                    },1000)
                }
            },'json')
            return false;
        })

        //修改淡季价格 自动更新旺季价格
        $('input[name=price]').change(function(){
            var num = $(this).attr('data-num');
            var busyPrice = $('.busyPrice[data-num='+num+']');
            var price = parseFloat($(this).val());
            var oldPrice = parseFloat($(this).attr('old-value'));
            var oldBusyPrice = parseFloat(busyPrice.attr('old-value'));

            var d_value = price - oldPrice;
            var newBusyPrice = oldBusyPrice+d_value;
            console.log(oldBusyPrice,d_value,newBusyPrice);
            // 设置新值
            $(this).attr('old-value',price);
            $(busyPrice).val(newBusyPrice);
            $(busyPrice).attr('old-value',newBusyPrice);
        })
    });
</script>

<script>
    $("#addclassify").on("click", function() {
        var html = '    <div class="layui-form-item classifychild" >\n' +
            '      		<label class="layui-form-label">套餐规格</label>\n' +
            '      		<div class="layui-input-inline person" style="width: 500px">\n' +
            '        		<div class="layui-input-inline" style="width: 400px;padding-bottom: 15px">\n' +
            '          			<input name="name" value=""  placeholder="规格名称" autocomplete="off" class="layui-input" type="text" lay-key="1">\n' +
            '        		</div>\n' +
            '          </div>\n' +
            '      		<span  class="layui-btn  layui-btn-sm addperson" style="margin-top: 4px;float: left">新增</span>\n' +
            '      		<span  class="layui-btn layui-btn-danger layui-btn-sm delclassify" style="margin-top: 4px;float: left">删除<i class="layui-icon"></i></span>\n' +
            '<div class="layui-form-item childs">'+
            '<label class="layui-form-label">&nbsp;</label>'+
            '<div class="layui-input-inline person" style="width: 650px">'+
            '<table class="layui-table">'+
            '<thead><tr><th>{$table_name[0]}</th><th>{$table_name[1]}</th><th>{$table_name[2]}</th><th>{$table_name[3]}</th><th>{$table_name[4]}</th><th>操作</th></tr></thead>'+
            '<tbody class="personchild"></tbody>'+
            '</table>'+
            '</div>'+
            '</div>'+
            '</div>';
        $("#addclassify").parent().before(html);
    });

    $(document).on("click", ".delclassify", function() {
        var that = this;
        var id = $(that).attr("data-id");
        if(id=='' || id==undefined){
            var child = $(that).parent(".classifychild");
            child.remove();
        }else{
            $.post("/admin/grouptoursline/delPackage",{id:id},function(data){
                if(data.code>0){
                    var child = $(that).parent();
                    child.remove();
                    layer.msg("删除成功");
                    setTimeout(function(){
                        window.location.reload();
                    },1000)
                }else{
                    layer.msg("删除失败");
                }
            },'json')
        }
    })
    $(document).on("click", ".delperson", function() {
        var that = this;
        var id = $(that).attr("data-id");
        if(id=='' || id==undefined){
            var child = $(that).parent().parent();
            child.remove();
        }else{
            $.post("/admin/grouptoursline/delSpec",{id:id},function(data){
                if(data.code>0){
                    var child = $(that).parent().parent();
                    child.remove();
                    layer.msg("删除成功");
                    setTimeout(function(){
                        window.location.reload();
                    },1000)
                }else{
                    layer.msg("删除失败");
                }
            },'json')
        }
    })
    $(document).on("click", ".addperson", function() {
        var html = '' +
            ' <tr>\n' +
            '   <td><input name="name" value="" placeholder="{$table_name[0]}" autocomplete="off" class="layui-input" type="text" lay-key="2"></td>\n' +
            '   <td><input name="price" value="" placeholder="{$table_name[1]}" autocomplete="off" class="layui-input" type="number" lay-key="2"></td>\n' +
            '   <td><input name="num" value="" placeholder="{$table_name[2]}" autocomplete="off" class="layui-input layui-col-xs5" type="number" lay-key="2"></td>\n' +
            '   <td><input name="minorder_num" value="" placeholder="{$table_name[3]}" autocomplete="off" class="layui-input layui-col-xs5" type="number" lay-key="2"></td>\n' +
            '   <td><input name="inc_order_num" value="" placeholder="{$table_name[4]}" autocomplete="off" class="layui-input layui-col-xs5" type="number" lay-key="2"></td>\n' +
            '   <td><span class="layui-btn layui-btn-danger layui-btn-sm delperson" style="margin-top: 4px"><i class="layui-icon"></i></span></td>\n' +
            '</tr>'
        $(this).siblings('.childs').find('.personchild').append(html);
    })
</script>
</body>
</html>